<template>
  <div ref="chartRef" style="width: 100%; height: 300px"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, useTemplateRef } from "vue";

const chartRef = useTemplateRef("chartRef");
let myChart = null;
const initChart = () => {
  myChart = echarts.init(chartRef.value);
  const options = {
    xAxis: {
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        symbolSize: 30,
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68],
        ],
        itemStyle: {
          color: "rgba(255,255,0,.5)",
        },
        type: "scatter",
        emphasis: {
          itemStyle: {
            borderColor: "rgba(255, 0, 0,.5)",
            borderWidth: 40,
          },
        },
      },
    ],
  };

  myChart.setOption(options);
};

const handleResize = () => {
  myChart.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart.dispose();
});
</script>

<style scoped></style>
